{"componentChunkName":"component---src-templates-tags-js","path":"/tags/component/","result":{"data":{"site":{"siteMetadata":{"title":"Aleks Popovic - personal website and blog"}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"excerpt":"In this tutorial you will learn how to set up a simple, yet pretty customizable star rating component in React. You know those little stars…","fields":{"slug":"/Easy-Customizable-Star-Rating-Component-in-React/"},"frontmatter":{"date":"November 14, 2023","title":"Easy Customizable Star Rating Component in React","series":null,"description":"In this tutorial you will learn how to set up a simple, yet pretty customizable star rating component in React. You know those little stars that you use to rate stuff all over the internet? We will build those as a default use-case, but we will also add support for other text-based and emoji-based icons that you can use instead of little yellow stars.","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsSAAALEgHS3X78AAABuUlEQVQY02WRz08TURDH9+BBsxVp+RHeM2V3+36/160bSrddWxZMaVlLobRxoyhqNW0TbJpIUuLF+IsbNw/CjZMxHoz/AAn4p/mKxoszc5lJZuYz3zEYpTo4Iew/s4TY66c3m873b4nNRn5jo5nNKs/zEEJUdzFmENclSmX8IpWK6QrnbOIMcb6XXtyetyeTPSxLxSAMIz2g0Yjq9SAIMMZGYnSQfNGf6fZQLiccR2QcTSEYg1J8Sc1cTiXOp25+Ts0OAAwsS69JKxVUq/mlJUKIAaLGXPwIbrcXw1V7JYRbOyi/zCjRXHmOLcy6c3AMwC/T/JFMXpjmm4WFGEL8BzuxP7r1cnDj9dgc7F8fHVx7+wl0HiAb3b/Lf75yu2XcjSSiRApahnAAwNfp6bNUyuL6PGZglcVKah4kpFsoOJTOA2Dbjp+TtRJ7HKGjXXbyVLxr8fVWLIMSE4JwTq8UNbgWhFJ9pGNZ7VbrYRx/fP8hrN3r17Z2w2b7TtVj3lqRlpfp814v7nTGh4dKqb9q/3uMzl3XHQ6Hpyen1dq6Vb5N/MyTZ/U1v3C8M6y4fpQtcilWKpUr5In9BjxtZoi/jzecAAAAAElFTkSuQmCC","aspectRatio":2.6666666666666665,"src":"/static/3fcc896f07936890607bd46ef93a75e1/bc8e0/rating.png","srcSet":"/static/3fcc896f07936890607bd46ef93a75e1/8ac63/rating.png 200w,\n/static/3fcc896f07936890607bd46ef93a75e1/3891b/rating.png 400w,\n/static/3fcc896f07936890607bd46ef93a75e1/bc8e0/rating.png 800w,\n/static/3fcc896f07936890607bd46ef93a75e1/6050d/rating.png 1200w,\n/static/3fcc896f07936890607bd46ef93a75e1/00405/rating.png 1600w,\n/static/3fcc896f07936890607bd46ef93a75e1/0e6e2/rating.png 1920w","srcWebp":"/static/3fcc896f07936890607bd46ef93a75e1/ccdb5/rating.webp","srcSetWebp":"/static/3fcc896f07936890607bd46ef93a75e1/6b183/rating.webp 200w,\n/static/3fcc896f07936890607bd46ef93a75e1/fc32b/rating.webp 400w,\n/static/3fcc896f07936890607bd46ef93a75e1/ccdb5/rating.webp 800w,\n/static/3fcc896f07936890607bd46ef93a75e1/9000d/rating.webp 1200w,\n/static/3fcc896f07936890607bd46ef93a75e1/e0075/rating.webp 1600w,\n/static/3fcc896f07936890607bd46ef93a75e1/30cf3/rating.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}}]}},"pageContext":{"tag":"component"}}}